<template>
	<view>

		<view class="ptb12 plr15" style="background-color: #F8E6E7;" v-if="this.bankInfo.sign_status!=1">
			<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
			<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').首次提现需要电签完成实名认证}}</text>
		</view>

		<view class="ptb12 plr15" v-else>
			<image src="../../static/images/wallet/sourcegray.png" mode="" style="width: 27upx;height: 21upx;"></image>
			<text class="ft12 gray6 ml5">
				{{$t('mine').当前绑定}}  
				<text class="ml10">{{bankInfo.username.slice(0,1)+'*'}}</text>
				<text class="ml10">{{'**** '+Bank_num.slice(-4)}}</text>
			</text>
		</view>
		<!-- 大陆 -->
		<view>
			<view class="bgWhite plr15 ft15">
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').国籍}}</view>
					<input  v-model="bankInfo.nationality" type="text" class="flex1 h50" :disabled="true"
						:class="this.userInfo.sign_status == 1 ?'gray9':''" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').证件类型}}</view>
					<input  v-model="documents" type="text" class="flex1 h50" :disabled="true"
						:class="this.userInfo.sign_status == 1?'gray9':''" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').真实姓名}}</view>
					<input  v-model="bankInfo.username" type="text" class="flex1 h50" disabled
						:class="this.userInfo.sign_status == 1?'gray9':''" />
				</view>
				<view class="align-center">
					<view class="txt">{{$t('mine').证件号码}}</view>
					<input  v-model="bankInfo.id_num" type="text" class="flex1 h50" disabled
						:class="this.userInfo.sign_status == 1?'gray9':''" />
				</view>
			</view>

			<view class="ptb12 plr15 align-center" style="background-color: #faeee0;">
				<!-- <view class="" style="padding-top: 2rpx;">
					<u-icon name="info-circle" color="#FF7800" size="14"></u-icon>
				</view> -->
				<u-icon name="info-circle" color="#FF7800" size="14"></u-icon>
				<text class="ft12 gray6 ml5" style="color: #FF7800;">{{$t('mine').请输入银联借记卡}}</text>
			</view>

			<view class="bgWhite plr15 ft15">
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').开户银行}}</view>
					<input  @blur="saveInfo()" v-model="bank_name" type="text" class="flex1 h50"
						:placeholder="$t('mine').输入开户银行" placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').银行卡号}}</view>
					<input  @blur="saveInfo()" v-model="bank_num" type="number" class="flex1 h50"
						:placeholder="$t('mine').输入银行卡号" placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('index').手机号}}</view>
					<view class="align-center ">
						<view class="ft15 align-center mr10" @click="navTo('/pages/address/areaCode')">
							<text class="mr10">{{code}}</text>
							<image src="../../static/images/address/xiahei.png" mode="aspectFill"
								style="width: 14rpx;height: 8rpx;"></image>
						</view>
						<input  @blur="saveInfo()" v-model="bank_phone" type="number" class="flex1 h50"
							:placeholder="$t('mine').输入手机号" placeholder-class="placeholderStyle" />
					</view>
					
				</view>
				<view class="align-center">
					<view class="txt">{{$t('set').验证码}}</view>
					<input v-model="captcha" type="number" class="flex1 h50" :placeholder="$t('mine').输入验证码"
						placeholder-class="placeholderStyle" />
					<view class="radius4 bdlight tc ptb3 red ft12 plr8" @click="getCode()">
						{{ timeDown > 0 ? timeDown + 's' : $t('login').获取验证码 }}
					</view>
				</view>
			</view>
		</view>


		<mix-button ref="confirmBtn" :text="$t('mine').下一步" marginTop="55rpx" @onConfirm="submit"></mix-button>

		<view class="mt20 gray6 plr15 ft12" v-if="this.userInfo.sign_status == 1">
			{{$t('mine').说明您在提交注册时}}
		</view>
		<view class="mt20 gray6 plr15 ft12" v-else>
			{{$t('mine').说明修改银行卡}}
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Bank_num:"",
				nationality: '',
				documents: '',
				realname: '',
				documents_num: '',

				bank_name: '',
				bank_num: '',
				bank_phone: '',
				captcha: '',

				timeDown: "",
				true_namey: '',
				bank_numy: '',
				code: '+86',
				list2: [
					{
							label: '台湾居民来往大陆通行证',
							// 其他属性值
							id: 'mtpt'
						},
						{
							label: '台湾居民居住证',
							// 其他属性值
							id: 'rpt'
						},
						{
							label: '港澳居民来往内地通行证',
							// 其他属性值
							id: 'mtphkm'
						},
						{
							label: '护照',
							// 其他属性值
							id: 'passport'
						},
						{
							label: '港澳居民居住证',
							// 其他属性值
							id: 'rphkm'
						}
				],
				bankInfo:{}

			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onLoad(options) {
			this.sign_status = options.sign_status
			if (uni.getStorageSync('code')) {
				this.code = uni.getStorageSync('code')
			}
			this.getbankAPI()
			// this.true_name = this.userInfo.true_name
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
		},
		onShow() {
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
			// console.log(this.userInfo.sign_status,this.sign_status)	
			this.$store.dispatch('getuserInfo')
		},
		watch: {
			userInfo: {
				handler(nVal, oVal) {

					if (this.userInfo.area == 2) {
						uni.setNavigationBarTitle({
							title: this.$t('mine').电签
						})
						if (uni.getStorageSync('HTBingCardInfo')) {
							let bingCardInfo = uni.getStorageSync('HTBingCardInfo')
							// this.username = bingCardInfo.username
							// this.bankInfo.area_code = bingCardInfo.area_code
							// this.bankInfo.bank_name = bingCardInfo.bank_name
							// this.bankInfo.bank_num = bingCardInfo.bank_num
							// this.bankInfo.bank_phone = bingCardInfo.bank_phone
						}
					} else {
						
						this.getbankAPI()
					}
				}

			}
		},
		methods: {
			//选择区号
			chooseCode(item) {
				console.log(item)
				this.code = item.code
				uni.setStorageSync('code', this.code)
				this.saveInfo()
			},
			saveInfo() {
				this.bankInfo.area_code = this.code
				this.bankInfo.bank_name = this.bank_name
				this.bankInfo.bank_num = this.bank_num
				this.bankInfo.bank_phone = this.bank_phone
				uni.setStorageSync('HTBingCardInfo', this.bankInfo)
			},
			//获取验证码
			getCode() {
				if (this.timeDown > 0) {
					return;
				}
				this.$utils.throttle(() => {
					const phone = this.bank_phone;
					if (!this.bank_phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码);
					}
					this.$api.smsSend({
						area_code:this.code,
						phone: phone,
						event: 'bindbrank',

					}).then((res) => {
						if (res && res.code == 1) {
							this.$utils.msg(res.msg);
							this.countDown(60);
						}
					})
				}, 2000)
			},
			//倒计时
			countDown(timer) {
				timer--;
				this.timeDown = timer;
				if (timer > 0) {
					setTimeout(() => {
						this.countDown(timer);
					}, 1000)
				}
			},
			// 获取回显的信息
			async getbankAPI() {
				const res = await this.$api.getbank()
				if (res && res.code == 1) {
					this.bankInfo = res.data
					this.list2.forEach((item)=>{
						if (item.id == this.bankInfo.cer_type) {
							this.documents = item.label
						}
					})
					if (this.bankInfo.bank_num) {
						uni.setNavigationBarTitle({
							title: this.$t('mine').换绑银行卡
						})
						this.bankInfo.is_edit = 2
						this.bank_name =this.bankInfo.bank_name
						this.bank_num = this.bankInfo.bank_num
						this.Bank_num = this.bankInfo.bank_num
						this.bank_phone = this.bankInfo.bank_phone
					} else{
						
					}
					// if (uni.getStorageSync('bingCardInfo')) {
					// 	let bingCardInfo = uni.getStorageSync('bingCardInfo')
					// 	this.bank_name = bingCardInfo.bank_name
					// 	this.bank_num = bingCardInfo.bank_num
					// 	this.userInfo.bank_phone = bingCardInfo.bank_phone
					// }


					// let qfour = this.bank_num?.substring(0, 4)
					// let hfour = this.bank_num?.substring(this.bank_num.length - 4)
					// this.bank_numy = qfour + '****' + hfour
					// let qname = this.username?.substring(0, 1)
					// this.true_namey = qname + this.username?.substring(1).replace(/./g, '*');
				}
			},
			// async getbankAPI(type) {
			// 	const res = await this.$api.getbank()
			// 	if (res && res.code == 1) {
			// 		if (type == 1) {
			// 			if (res.data.step&&res.data.step > 0) {
			// 				this.navTo('/pages/wallet/progress?val='+res.data.step)
			// 			} else{
							
			// 			}
			// 		} else{
			// 			this.bankInfo = res.data
			// 			this.username = this.bankInfo.username
			// 			this.id_num = this.bankInfo.id_num
			// 			this.bank_name = this.bankInfo.bank_name
			// 			this.bank_num = this.bankInfo.bank_num
			// 			this.userInfo.phone = this.bankInfo.bank_phone
			// 			let qfour = this.bank_num?.substring(0, 4)
			// 			let hfour = this.bank_num?.substring(this.bank_num.length - 4)
			// 			this.bank_numy = qfour + '****' + hfour
			// 			let qname = this.username?.substring(0, 1)
			// 			this.true_namey = qname + this.username?.substring(1).replace(/./g, '*');
			// 		}
			// 	}
			// }
			// 提交剩余信息
			async submit() {
				console.log(1111111111);
				if (!this.bank_name) {
					return this.$utils.msg(this.$t('mine').输入开户银行)
				}
				if (!this.bank_num) {
					return this.$utils.msg(this.$t('mine').输入银行卡号)
				}
				if (!this.userInfo.phone) {
					return this.$utils.msg(this.$t('login').请输入手机号码)
				}
				if (!this.captcha) {
					return this.$utils.msg(this.$t('login').请输入验证码)
				}
				let infoObj = {
					bank_name: this.bank_name,
					bank_num: this.bank_num,
					bank_phone: this.bank_phone,
					captcha: this.captcha,
					is_edit:this.bankInfo.is_edit,
				}
				console.log(infoObj)
				const res = await this.$api.bindAbroadBrank(infoObj)
				// return
				if (res && res.code == 1) {
					location.href = res.data.url
				}

			},
			//签约接口
			async getContractUrlAPI(cert_type) {
				let obj = {
					name: this.username,
					idcard: this.id_num,
					bankcard: this.bank_name,
					phone: this.bank_phone,
					cert_type: 1
				}

				const res = await this.$api.getContractUrl({
					cert_type: cert_type
				})
				if (res && res.code == 1) {
					uni.reLaunch({
						url:'/pages/wallet/webView?url='+res.data.url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.placeholderStyle {
		font-size: 30upx !important;
	}

	.tip {
		background-color: rgba(242, 60, 75, 0.1);
	}

	.txt {
		width: 170upx
	}

	.txt1 {
		width: 100%;
		height: 100upx;
		// line-height: 100upx;
		display: flex;
		justify-content: start;
		align-items: center;

		.icon1 {
			width: 26upx;
			height: 26upx;
			margin-top: -4upx;
		}
	}

	.box1 {
		display: flex;
		justify-content: space-between;

		.bg1 {
			width: 308upx;
			height: 191upx;
			background-image: url("../../static/images/wallet/kuang.png");
			background-size: 308upx 191upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.img1 {
				width: 274upx;
				height: 157upx;
			}

			.bg2 {
				background-color: #ffffff;
				border-radius: 50%;
				width: 32upx;
				height: 32upx;
				position: absolute;
				right: 26upx;
				top: 26upx;
			}

			.img2 {
				width: 32upx;
				height: 32upx;
			}
		}

	}

	.txt2 {
		width: 308upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 26upx;
	}

	.text-center {
		text-align: center;
	}

	.t-box {
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.txt3 {
			width: 674upx;
			// height: 512upx;
			background-color: #ffffff;
			margin-top: -260upx;
			padding: 45upx 42upx;
			border-radius: 30upx;

			.titl1 {
				font-size: 32upx;
				// line-height: 60upx;
			}

			.main {
				margin-top: 10upx;
				font-size: 24upx;
				color: #666666;
				letter-spacing: 2upx;
				line-height: 40upx;
			}

			.img1 {
				width: 590upx;
				height: 128upx;
				margin-top: 38upx;
			}

			.bu-konw {
				margin: 0 auto;
				width: 420upx;
				height: 90upx;
				border-radius: 50upx;
				border: 2upx solid #F44A42;
				text-align: center;
				line-height: 86upx;
				margin-top: 42upx;
				font-size: 32upx;
				color: #F44A42;
			}
		}

	}

	.box2 {
		.bu1 {
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;
		}

		.choose1 {
			color: #B0B0B0;
		}

		.choose2 {
			color: #333333;
		}

		.news-top {
			line-height: 99upx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>